<template>

</template>

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
export default {
  name: "Linellae",
  mounted() {
    try{
      if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {

      }else{
        $(function(){
          var canvas = document.querySelector('canvas'),
              ctx = canvas.getContext('2d')
          canvas.width = $(window).width();
          canvas.height = $(window).height();
          ctx.lineWidth = .3;
          ctx.strokeStyle = (new Color(150)).style;

          var mousePosition = {
            x: 30 * canvas.width / 100,
            y: 30 * canvas.height / 100
          };

          var dots = {
            nb: 250,
            distance: 100,
            d_radius: 150,
            array: []
          };

          function colorValue(min) {
            return Math.floor(Math.random() * 255 + min);
          }

          function createColorStyle(r,g,b) {
            return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
          }

          function mixComponents(comp1, weight1, comp2, weight2) {
            return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);
          }

          function averageColorStyles(dot1, dot2) {
            var color1 = dot1.color,
                color2 = dot2.color;

            var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),
                g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),
                b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);
            return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));
          }

          function Color(min) {
            min = min || 0;
            this.r = colorValue(min);
            this.g = colorValue(min);
            this.b = colorValue(min);
            this.style = createColorStyle(this.r, this.g, this.b);
          }

          function Dot(){
            this.x = Math.random() * canvas.width;
            this.y = Math.random() * canvas.height;

            this.vx = -.5 + Math.random();
            this.vy = -.5 + Math.random();

            this.radius = Math.random() * 2;

            this.color = new Color();
          }

          Dot.prototype = {
            draw: function(){
              ctx.beginPath();
              ctx.fillStyle = this.color.style;
              ctx.arc(this.x, this.y, this.radius, 0, Math.PI, false);
              ctx.fill();
            }
          };

          function createDots(){
            for(i = 0; i < dots.nb; i++){
              dots.array.push(new Dot());
            }
          }

          function moveDots() {
            for(i = 0; i < dots.nb; i++){

              var dot = dots.array[i];

              if(dot.y < 0 || dot.y > canvas.height){
                dot.vx = dot.vx;
                dot.vy = - dot.vy;
              }
              else if(dot.x < 0 || dot.x > canvas.width){
                dot.vx = - dot.vx;
                dot.vy = dot.vy;
              }
              dot.x += dot.vx;
              dot.y += dot.vy;
            }
          }

          function connectDots() {
            for(i = 0; i < dots.nb; i++){
              for(j = 0; j < dots.nb; j++){
                var i_dot = dots.array[i];
                var j_dot = dots.array[j];

                if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > - dots.distance && (i_dot.y - j_dot.y) > - dots.distance){
                  if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > - dots.d_radius && (i_dot.y - mousePosition.y) > - dots.d_radius){
                    ctx.beginPath();
                    ctx.strokeStyle = averageColorStyles(i_dot, j_dot);
                    ctx.moveTo(i_dot.x, i_dot.y);
                    ctx.lineTo(j_dot.x, j_dot.y);
                    ctx.stroke();
                    ctx.closePath();
                  }
                }
              }
            }
          }

          function drawDots() {
            for(i = 0; i < dots.nb; i++){
              var dot = dots.array[i];
              dot.draw();
            }
          }

          function animateDots() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            moveDots();
            connectDots();
            drawDots();

            requestAnimationFrame(animateDots);
          }

          $('canvas').on('mousemove', function(e){
            mousePosition.x = e.pageX;
            mousePosition.y = e.pageY;
          });

          $('canvas').on('mouseleave', function(e){
            mousePosition.x = canvas.width / 2;
            mousePosition.y = canvas.height / 2;
          });

          createDots();
          requestAnimationFrame(animateDots);
        });
      }
    }catch(e){}
  }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.cavs{
  z-index:1;
  position: fixed;
  width:95%;
  margin-left: 20px;
  margin-right: 20px;
}

html,body{
  width: 100%;
  height: 100%;
  background: url("https://cos.tgcsblog.top/markdown/loginbg.jpg") no-repeat;
  background-size: 100% 100%;

}



.loginmain{
  background: rgba(0, 0, 0, 0.5);
  width: 540px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 100px 40px 40px 40px;
  box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
  z-index: 99999;
}
.login-title{
  color: #D3D7F7;
  height: 60px;
  font-size:20px;
  text-align: center;
  margin-top: -20px;
}
.login-con{
  height: 208px;
  position: absolute;
  left: 0;
  width: 80%;
  margin:0 10%;
}
.login-user{
  position: relative;
}
.icon{
  position: absolute;
  z-index: 1;
  left: 36px;
  top: 8px;
  opacity: 1;
}
.login-con input{
  width: calc(100% - 130px);
  margin-top: -2px;
  background: rgba(57, 61, 82, 0);
  left: 0;
  padding: 10px 65px;
  border-top: 2px solid rgba(57, 61, 82, 0);
  border-bottom: 2px solid rgba(57, 61, 82, 0);
  border-right: none;
  border-left: none;
  outline: none;
  font-family: 'Gudea', sans-serif;
  box-shadow: none;
  color: #61BFFF !important;
}
.login-pwd, .login-yan{
  position: relative;
}
/*
.login-pwd .icon{
    position: absolute;
    z-index: 1;
    left: 36px;
    top: 8px;
    opacity: .5;
}*/
.login-btn{
  width: 80%;
  margin: 0 auto;
  position: relative;
}
.login-btn input{
  border-radius: 3px;
  background: transparent;
  border: 2px solid #4FA1D9;
  color: #4FA1D9;
  text-transform: uppercase;
  font-size: 11px;
  cursor: pointer;
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;

  margin: auto;
  width: 80%;
  transition-property: background,color;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
}
.login-btn input:hover{
  color: white !important;
  background: #4FA1D9;
  cursor: pointer;
  -webkit-transition-property: background,color;
  transition-property: background,color;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
}
</style>